<template>
	<view class="experirence">
		<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay"  :duration="duration">
			<swiper-item>
				<view>
					<image src="../../static/iamges/zu898.png"></image>
				</view>
				<view>
					<view class="item1">
						<view class="item-1">新产品 新体验</view >
						<view class="item-2">产品升级 大小额任你选</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view>
					<image  src="../../static/iamges/zu899.png"></image>
				</view>
				<view>
					<view class="item">
						<view class="item-3">超高额度 灵活分期</view>
						<view class="item-4">最高额度可达30万元</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view>
					<image  src="../../static/iamges/zu900.png"></image>
				</view>
				<view>
					<view class="item2">
						<view class="item-5">极速放款 快如闪电</view>
						<view class="item-6">线上操作 无需等待</view>
						<view class="item-7" @click="to">
							立即体验
						</view>
					</view>
					
				</view>
			</swiper-item>
		</swiper>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				    indicatorDots: true,
				    autoplay: false,
				    // interval: 2000,
				    duration: 500
			}
		},
		methods: {
			to(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.experirence{
	width:100vw;
	height:100vh;
	// box-sizing: border-box;
	position:relative;
	swiper{
		width:100%;
		height:100%;
		swiper-item{
			width:100%;
			height:100%;
			
			>view{
				width:100%;
				height:100%;
				image{
					width:100%;
					height:100%;
				}
			}
		    >view:nth-child(2) {
			width:100%;
			
			.item1{
				position:absolute;
				z-index:999;
				display:flex;
				top:1000rpx;
				left:170rpx;
				flex-direction: column;
				align-items: center;
				// view{
				// 	color:black;
				// }
				.item-1{
					font-size: 68rpx;
					// font-weight: bold;
				}
				.item-2{
					margin-top: 20rpx;
					color:#a1a1a1
					// font-weight: bold;
				}
				}
				
		    }
			.item{
				position:absolute;
				z-index:999;
				display:flex;
				top:1000rpx;
				left:100rpx;
				flex-direction: column;
				align-items: center;
				.item-3{
					font-size: 68rpx;
					
				}
				.item-4{
					margin-top: 20rpx;
					color:#a1a1a1
					
				}
			}
		    .item2{
				position:absolute;
				z-index:999;
				display:flex;
				top:950rpx;
				left:100rpx;
				flex-direction: column;
				align-items: center;
				.item-5{
					font-size: 68rpx;
					
				}
				.item-6{
					margin-top: 20rpx;
					color:#a1a1a1
					}
				.item-7{
					width:50%;
					height:80rpx;
					border-radius: 50rpx;
					border: 1px solid #ff6776;
					color:#ff6776;
					text-align: center;
					line-height: 80rpx;
					margin-top: 30rpx;
					font-size: 30rpx;
				}
				}
			}
	}
}

</style>
